---
title: Alert
description: Alerts provide contextual feedback messages to users with different severity levels and optional interactive elements.
source: 'sentry/components/core/alert'
resources:
  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/alert/index.tsx
  figma: https://www.figma.com/design/eTJz6aPgudMY9E6mzyZU0B/%F0%9F%90%A6-Components?node-id=3040-309&p=f&t=fldvMEFX98yRuTH5-0
  a11y:
    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
    WCAG 2.1.1: https://www.w3.org/TR/WCAG22/#keyboard
    WCAG 2.4.7: https://www.w3.org/TR/WCAG22/#focus-visible
    WAI-ARIA Alert Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
---

import {Alert} from 'sentry/components/core/alert';
import {AlertLink} from 'sentry/components/core/alert/alertLink';
import {Badge} from 'sentry/components/core/badge';
import {Flex} from 'sentry/components/core/layout';
import {IconAdd, IconDelete, IconEdit, IconMail} from 'sentry/icons';
import * as Storybook from 'sentry/stories';

import documentation from '!!type-loader!@sentry/scraps/alert';

export {documentation};

To create a basic alert, wrap your message in an `<Alert>` component and specify the appropriate type.

```jsx
<Alert type="info">This is an informational message</Alert>
```

## Props

### Types

Alerts come in five different types to convey different levels of importance and meaning: `muted`, `info`, `warning`, `success`, and `error`.

<Storybook.Demo>
  <Alert.Container>
    <Alert type="muted">This is a muted alert for neutral information</Alert>
    <Alert type="info">This is an info alert for general information</Alert>
    <Alert type="warning">This is a warning alert for important notices</Alert>
    <Alert type="success">This is a success alert for positive feedback</Alert>
    <Alert type="error">This is an error alert for critical issues</Alert>
  </Alert.Container>
</Storybook.Demo>
```jsx
<Alert.Container>
  <Alert type="muted">This is a muted alert for neutral information</Alert>
  <Alert type="info">This is an info alert for general information</Alert>
  <Alert type="warning">This is a warning alert for important notices</Alert>
  <Alert type="success">This is a success alert for positive feedback</Alert>
  <Alert type="error">This is an error alert for critical issues</Alert>
</Alert.Container>
```

### System Alerts

System alerts are full-width variants typically used for application-level notifications or banners.

<Storybook.Demo>
  <Alert type="warning" system>
    This is a system-wide alert that spans the full width of its container
  </Alert>
</Storybook.Demo>
```jsx
<Alert type="warning" system>
  This is a system-wide alert that spans the full width of its container
</Alert>
```

### Icons

By default, alerts display appropriate icons based on their type. You can hide icons by setting `showIcon={false}` or provide custom icons.

<Storybook.Demo>
  <Alert.Container>
    <Alert type="info">Default info icon</Alert>
    <Alert type="warning" showIcon={false}>
      No icon
    </Alert>
    <Alert type="success" icon={<IconAdd />}>
      Custom add icon
    </Alert>
  </Alert.Container>
</Storybook.Demo>
```jsx
<Alert.Container>
  <Alert type="info">Default info icon</Alert>
  <Alert type="warning" showIcon={false}>
    No icon
  </Alert>
  <Alert type="success" icon={<IconAdd />}>
    Custom add icon
  </Alert>
</Alert.Container>
```

### Expandable Content

Alerts can contain expandable content to provide additional details without overwhelming the initial view. Use `handleExpandChange` to add additional logic on expand and on collapse.

<Storybook.Demo>
  <Alert
    type="warning"
    expand={
      <div>
        <p>This is additional content that was hidden by default.</p>
        <p>
          You can include any React elements here, including lists, links, or other
          components.
        </p>
      </div>
    }
  >
    Click to expand this alert for more details
  </Alert>
</Storybook.Demo>
```jsx
<Alert
  type="warning"
  expand={
    <div>
      <p>This is additional content that was hidden by default.</p>
      <p>
        You can include any React elements here, including lists, links, or other
        components.
      </p>
    </div>
  }
>
  Click to expand this alert for more details
</Alert>
```

### Expanded by Default

You can control the initial expansion state of alerts with the `defaultExpanded` prop.

<Storybook.Demo>
  <Alert
    type="info"
    defaultExpanded
    expand={
      <div>
        <p>This alert starts in an expanded state.</p>
        <p>Users can still collapse it by clicking the chevron.</p>
      </div>
    }
  >
    This alert is expanded by default
  </Alert>
</Storybook.Demo>
```jsx
<Alert
  type="info"
  defaultExpanded
  expand={
    <div>
      <p>This alert starts in an expanded state.</p>
      <p>Users can still collapse it by clicking the chevron.</p>
    </div>
  }
>
  This alert is expanded by default
</Alert>
```

### Trailing Items

Add interactive elements like buttons, links or badges to the right side of alerts using the `trailingItems` prop. Note that for buttons, the standardized `<Alert.Button>` component should be used because it handles sizing correctly.

<Storybook.Demo>
  <Alert.Container>
    <Alert type="info" trailingItems={<Badge type="warning">Action Required</Badge>}>
      This alert has a trailing badge
    </Alert>
    <Alert
      type="error"
      trailingItems={
        <Flex gap="sm">
          <Alert.Button priority="danger" icon={<IconDelete />}>
            Delete
          </Alert.Button>
          <Alert.Button priority="muted" icon={<IconEdit />}>
            Edit
          </Alert.Button>
        </Flex>
      }
    >
      This alert has multiple trailing actions
    </Alert>
    <Alert
      type="warning"
      expand={
        <div>
          <p>This alert starts in an expanded state.</p>
          <p>Users can still collapse it by clicking the chevron.</p>
        </div>
      }
      trailingItems={
        <Flex gap="sm">
          <Badge type="warning">Action Required</Badge>
          <Alert.Button priority="muted" icon={<IconEdit />}>
            Edit
          </Alert.Button>
        </Flex>
      }
    >
      This alert has multiple trailing items and can be expanded.
    </Alert>
  </Alert.Container>
</Storybook.Demo>
```jsx
<Alert.Container>
  <Alert
    type="info"
    trailingItems={<Alert.Button priority="primary">Take Action</Alert.Button>}
  >
    This alert has a trailing badge
  </Alert>
  <Alert
    type="error"
    trailingItems={
      <Flex gap="sm">
        <Alert.Button priority="danger" icon={<IconDelete />}>
          Delete
        </Alert.Button>
        <Alert.Button priority="muted" icon={<IconEdit />}>
          Edit
        </Alert.Button>
      </Flex>
    }
  >
    This alert has multiple trailing actions
  </Alert>
</Alert.Container>
```

## Container

Use `Alert.Container` to properly manage spacing between multiple alerts.

<Storybook.Demo>
  <Alert.Container>
    <Alert type="info">First alert in a container</Alert>
    <Alert type="warning">Second alert in a container</Alert>
    <Alert type="success">Third alert in a container</Alert>
  </Alert.Container>
</Storybook.Demo>
```jsx
<Alert.Container>
  <Alert type="info">First alert in a container</Alert>
  <Alert type="warning">Second alert in a container</Alert>
  <Alert type="success">Third alert in a container</Alert>
</Alert.Container>
```

## Alert Links

The `AlertLink` component creates a clickable alert that can navigate to internal pages, external URLs, or triggers custom actions.

AlertLink supports three types of navigation: internal routing, external URLs, and custom click handlers.

### Internal

Use the `to` prop for internal navigation within the application.

<Storybook.Demo>
  <AlertLink to="/settings">Go to Settings</AlertLink>
</Storybook.Demo>
```jsx
<AlertLink to="/settings">Go to Settings</AlertLink>
```

### External

Use the `href` prop for external URLs. The `openInNewTab` prop controls whether the link opens in a new tab.

<Storybook.Demo>
  <AlertLink href="https://docs.sentry.io" openInNewTab>
    Read the Documentation
  </AlertLink>
</Storybook.Demo>
```jsx
<AlertLink href="https://docs.sentry.io" openInNewTab>
  Read the Documentation
</AlertLink>
```

### Custom Handlers

Use the `onClick` prop for custom actions that don't involve navigation.

<Storybook.Demo>
  {/* eslint-disable-next-line no-alert */}
  <AlertLink onClick={() => alert('Custom action triggered!')}>
    Trigger Custom Action
  </AlertLink>
</Storybook.Demo>
```jsx
<AlertLink onClick={() => alert('Custom action triggered!')}>
  Trigger Custom Action
</AlertLink>
```

### Trailing Items

By default, AlertLink includes a right-pointing chevron icon. You can customize this with the `trailingItems` prop.

<Storybook.Demo>
  <AlertLink.Container>
    <AlertLink to="/settings">Default trailing chevron</AlertLink>
    <AlertLink to="/settings" trailingItems={<IconMail />}>
      Custom trailing icon
    </AlertLink>
    <AlertLink to="/settings" trailingItems={null}>
      No trailing items
    </AlertLink>
  </AlertLink.Container>
</Storybook.Demo>
```jsx
<AlertLink to="/settings">Default trailing chevron</AlertLink>
<AlertLink to="/settings" trailingItems={<IconMail />}>
  Custom trailing icon
</AlertLink>
<AlertLink to="/settings" trailingItems={null}>
  No trailing items
</AlertLink>
```

## Accessibility

To meet WCAG 2.2 AA compliance, `<Alert>` automatically meets the [WCAG 1.4.3](https://www.w3.org/TR/WCAG22/#contrast-minimum), [WCAG 2.1.1](https://www.w3.org/TR/WCAG22/#keyboard), and [WCAG 2.4.7](https://www.w3.org/TR/WCAG22/#focus-visible) success criteria.

Developers should take care to ensure that their implementations additionally follow the [WAI-ARIA Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) and consider using appropriate ARIA attributes for dynamic content updates.
